Ext.BLANK_IMAGE_URL = '../javascripts/mfbase/ext/resources/images/default/s.gif';

Ext.onReady(function(){

    // NOTE: This is an example showing simple state management. During development,
    // it is generally best to disable state management as dynamically-generated ids
    // can change across page loads, leading to unpredictable results.  The developer
    // should ensure that stable state ids are set for stateful components in real apps.
    //Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    Ext.QuickTips.init();

    
    var s_option5 = {
        reproject : true,
        opacity : 0.5,
        visibility : true,
        isBaseLayer : false,
        displayInLayerSwitcher : true,
        singleTile: true
    };
    //    var maxbox_x1=12559276;
    //    var maxbox_y1=2745597;
    //    var maxbox_x2=12717000;
    //    var maxbox_y2=2576984;

    var maxbox_x1=-20037508.34;
    var maxbox_y1=-20037508.34;
    var maxbox_x2=20037508.34;
    var maxbox_y2=20037508.34;

    var host_url="http://127.0.0.1:8080/geoserver/wms";
    var format = "image/png";
    var options = {
        projection : 'EPSG:900913',
        units : "m",
        maxResolution : 156543.0339,
        maxExtent : new OpenLayers.Bounds(maxbox_x1, maxbox_y1,
            maxbox_x2,maxbox_y2),
        tileSize : new OpenLayers.Size(1024, 1024)
    };
    var  wmsLayers = ['bj:bj_building_translate','bj:bj_road_translate'];
    var lon = 12963853;
    var lat = 4854774;

    cellname='5247';
    grid_id=61546468;


    map = CreateMap('map',host_url,options,format,lon,lat,wmsLayers,s_option5);
    this.vector = createVectorLayer(map,'vector');
    
    var center= map.setCenter(new OpenLayers.LonLat(lon,lat), 22);
    
    markers = new OpenLayers.Layer.Markers("markers");

    map.addLayer(markers);

    //map.setCenter(new OpenLayers.LonLat(lon,lat), 20);

    var toolbarItems = createToolbar(map,lon,lat);
    createViewport(map,toolbarItems,center);
    //map.setCenter(new OpenLayers.LonLat(lon,lat), 40);

    //点击查询

    OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control, {
        defaultHandlerOptions: {
            'single': true,
            'double': false,
            'pixelTolerance': 0,
            'stopSingle': false,
            'stopDouble': false
        },

        initialize: function(optwiions) {
            this.handlerOptions = OpenLayers.Util.extend(
            {}, this.defaultHandlerOptions
                );
            OpenLayers.Control.prototype.initialize.apply(
                this, arguments
                );
            this.handler = new OpenLayers.Handler.Click(
                this, {
                    'click': this.trigger
                }, this.handlerOptions
                );
        },

        trigger: function(e) {
            var lonlat = map.getLonLatFromViewPortPx(e.xy);
            x= lonlat.lon - 690;
            y= lonlat.lat - 190;
            //alert("You clicked near " + y + " N, " +
            // + x + " E "+ getGridid(x,y));
            grid_id=getGridid(x,y);
            singlegrid.params.VIEWPARAMS='grid_id:'+grid_id;
            singlegrid.redraw();
            field900_line.params.VIEWPARAMS='grid_id:'+grid_id;
            field900_line.redraw();
            field1800_line.params.VIEWPARAMS='grid_id:'+grid_id;
            field1800_line.redraw();
            show_grid_detail(grid_id,x,y);


        }
    });

    click=new OpenLayers.Control.Click();
    map.addControl(click);
    click.activate();


    function getGridid(x, y) {
        return (1 + Math.floor((x - 12932000 ) / 5) + Math.floor((y - 4825000 ) / 5)
            * 10000);
    }

    //点击查询结束

    //grid_detail

    function show_grid_detail(grid_id){



        var size = new OpenLayers.Size(21,25);
        var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
        var icon = new OpenLayers.Icon('/images/marker-gold.png',size,offset);
        markers.events.register('mousedown', markers, function(evt) {
            markers.removeMarker(markers);
            OpenLayers.Event.stop(evt);
        });
        markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(x+690,y+190),icon));


        var store_grid_detail = new Ext.data.JsonStore({
            url : '/map/grid_detail',
            baseParams:{
                grid_id: grid_id
            },
            root:'rows',
            totalProperty:'results',
            fields : ['grid_id','cell900_c','cell900_p','cell1800_c','cell1800_p','cellname900','cellname1800','addr900','addr1800','d900','d1800'],
            //data: mydata,
            autoLoad:true,
            remoteSort: true
        });
        var i=0;
        var color=new Array(2);
        color[0]='#f1f6f7';
        color[1]='#ffffff';
        var colarr=['cellname900','addr900','d900','cellname1800','addr1800','d1800'];
        var para='<div class="x-grid-group-title" style="margin-left:0%"><ol>';
        for(var f=0;f<colarr.length;f++){
            para=para+'<li style="background-color:'+color[((i++)%2)]+'">'+colarr[f]+':{'+colarr[f]+'}'+'</li>';
        }
        para=para+'</ol></div>'
        var rowExpander = new Ext.grid.RowExpander({
            tpl: new Ext.Template(para)
        });

        var grid_detail = new Ext.grid.GridPanel({
            selModel:new Ext.grid.RowSelectionModel(),
            store: store_grid_detail,
            columns: [
            rowExpander,
            {
                header: "grid_id",
                width: 60,
                dataIndex: 'grid_id'
            },

            {
                header: "cell900_c",
                width: 60,
                dataIndex: 'cell900_c'
            },

            {
                header: "cell900_p",
                width: 60,
                dataIndex: 'cell900_p'
            },

            {
                header: "cell1800_c",
                width: 60,
                dataIndex: 'cell1800_c'
            },

            {
                header: "cell1800_p",
                width: 60,
                dataIndex: 'cell1800_p'
            }
            ],
            plugins: rowExpander,
            width: 600,
            height: 100,
            loadMask: true
        });

        var win_grid_detail = new Ext.Window({
            title:'网格场强预测信息'+grid_id,
            layout : 'fit',
            floating:true,
            width : 400,
            height : 300,
            closeAction :'hide',
            plain : true,
            items : [grid_detail]
        });
        win_grid_detail.show();
    }

});